<template>
	<om-page :title="pageTitle" class="om-font-size">
		<view class="flex justify-end padding">
			<view v-if="showAll" style="position: fixed;z-index: 10;">
				<text class="lg text-gray cuIcon-attentionfavorfill" @click="showAllClick">隐藏</text>
			</view>
			<view v-else style="position: fixed;z-index: 10;">
				<text class="lg text-gray cuIcon-attentionfavor" @click="showAllClick">全显</text>
			</view>
		</view>
		<!-- #ifndef APP-PLUS -->
			<view class="om-font-size" style="text-align: center; width: 480rpx; display: flex;justify-content: center;margin: 0 auto;">
				{{pageTitle}}
			</view>
		<!-- #endif -->
		<!-- #ifndef APP-PLUS -->
		<view class="om-show-hd">
			<view style="display: flex;align-items:center;justify-content: center;">
				<om-avatar avatarSize="lg" :avatarColor="logoColor" :text="firstName"></om-avatar>
				<view v-html="middleName"></view>
			</view>
		</view>
		<!-- #endif -->
		<view class="page__bd" style="margin:10px;padding-bottom:120rpx;">
			<!-- 主表信息 -->
			<view v-if="showData">
				<view v-for="(item, index) in showData" :key="index" style="display: block;">
					<view v-if="hasValue(item.value) || showAll">
						<view class="tui-flex">
							<view class="flex justify-end tui-col-4 show-label"> 
								<text v-if="changeTitles[item.name] &&item.value.toString() !=='false'" class="om-font-size">
									{{changeTitles[item.name]}}
								</text>
								<text v-else class="om-font-size">{{ item.name }}</text>
							</view>
							<view class="tui-col-8" style="white-space:pre-wrap;display:flex;align-items:flex-end;">
								<button class="bg-blue" v-if="item.isfile" size="mini" @click="openFile(item)">查看</button>
								<text v-else>{{ hasValue(item.value)&&item.value.toString() !=='false' ? (item.value.toString() === 'true'?'√':item.value.toString()) : '' }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="create-qrcode" v-show="qrcodeShow">
				<view class="bg" @click="closeCodeModle"></view>
				<view class="canvascode">
					<canvas id="qrcode" canvas-id="qrcode" :style="{width: `${qrcodeSize}px`, height: `${qrcodeSize}px`}" />
				</view>
			</view>
			<view v-if="subTitles">
				<view v-for="(title, index) in subTitles" :key="index">
					<view v-if="showDataMap[title] && showDataMap[title].length && titleItemNum[title]">
						<om-sub :isCard="true" :title="changeTitles[title]?changeTitles[title]:title">
							<view slot="extra" class="flex" v-show="titleButtonMap[title] && titleButtonMap[title].length>0">
								<view v-for="(subbtn,subindexs) in titleButtonMap[title]" :key="subindexs">
									<button class="om-font-size-xs subbtn om-btn-color" @click="useHandle(subbtn.onClick)">{{ subbtn.text }}</button>
								</view>
							</view>
							<view v-for="(item, showIndex) in showDataMap[title]" :key="showIndex" style="display: block">
								<view v-if="(hasValue(item.value) &&item.value.toString() !=='false')|| showAll">
									<view v-if="showDataMap[title].length == 1" class="tui-flex">
										<view class="tui-col-1"></view>
										<view class="tui-col-11">
											<button class="bg-blue" v-if="item.isfile" size="mini" @click="openFile(item)">查看</button>
											<view style="white-space:pre-wrap; word-wrap: break-word" v-else v-html="hasValue(item.value) &&item.value.toString() !=='false' ? (item.value.toString() === 'true'?'√':item.value.toString()) : '' "></view>
										</view>
									</view>
									<view v-else class="flex" >
										<view class="justify-end tui-col-4 show-label om-font-size">
											<text class="om-font-size flex justify-end">{{getName(item)}}</text>
										</view>
										<view class="tui-col-8 flex justify-start align-center">
											<button class="bg-blue" v-if="item.isfile" size="mini" @click="openFile(item)">查看</button>
											<view v-else style="word-break: break-all; white-space:initial ;"class="flex  justify-start" v-html="hasValue(item.value) &&item.value.toString() !=='false' ? (item.value.toString() === 'true'?'√':item.value.toString()) : '' "></view>
										</view>
									</view>
								</view>
							</view>
						</om-sub>
					</view>
					<view v-else-if="showListMap[title] && showListMap[title].length && titleItemNum[title]">
						<om-sub :isCard="true" :title="changeTitles[title]?changeTitles[title]:title" >
							<view slot="extra" class="flex" v-show="titleButtonMap[title] && titleButtonMap[title].length>0">
								<view v-for="(subbtn,subindexs) in titleButtonMap[title]" :key="subindexs">
									<button class="om-font-size-xs subbtn om-btn-color" @click="useHandle(subbtn.onClick)">{{ subbtn.text }}</button>
								</view>
							</view>
							<view slot="extra" class="flex" style="width:50px;" @click="analytics(title)" >
								<view class="cuIcon-refresh" style="margin-right:px;">
									{{!showTable[title]?'明细':'列表'}} 
								</view>
							</view>
							<!-- table子表 -->
							<view v-if="!showTable[title]">
								<view class="margin-bottom" v-for="(item,index) of tableData" :key="index" >
									<view class="margin-bottom-xs" style="font-size: 12px;">
										{{(item[0][exist[0]] || '-')}}
									</view>
									<view class="margin-bottom-xs " style="font-size: 12px;display: flex;flex-wrap: wrap; flex-direction: row;">
										<view class="" v-for="(eItem,eIndex) of exist" :key="eIndex">
											<view class="" v-if="eIndex != 0">
												{{existArr[eIndex].title + ':' + (item[0][eItem] || '-') + ';' + '\xa0\xa0'}}
											</view>
										</view>
									</view>
									<ot-table  textAlign="left" titleTextAlign="center" :tableData="item" :columns="tableColumns[title]"
									 :stickSide="stickSideTable[title]">
									</ot-table>
								</view>
							</view>
							<!-- 子表信息 -->
							<view v-else class="margin-top-xs">
								<view class="show-block" v-for="(show, subIndex) in showListMap[title]" :key="subIndex">
									<om-divider :gap="[10, 10]" lineColor="#ddd" :lineSize="2"></om-divider>
									<view class="show-title padding-left padding-top-xs" style="font-size: 16px;">明细{{ subIndex + 1 }}</view>
									<view v-for="(item, itemIndex) in show" :key="itemIndex" style="display: block;">
										<view v-if="hasValue(item.value) || showAll">
											<view class="tui-flex">
												<view class="tui-flex  justify-end tui-col-4 show-label" >
													<!-- <text v-if="changeTitles[item.name]">
														{{changeTitles[item.name]}}
													</text>
													<text v-else>{{ item.name }}</text> -->
													<text class="om-font-size flex  justify-end">{{getName(item)}}</text>
												</view>
												<view class="tui-col-8  flex justify-start align-center">
													<button class="bg-blue" v-if="item.isfile" size="mini" @click="openFile(item)">查看</button>
													<text v-else class="flex  justify-start" >{{ hasValue(item.value)&&item.value.toString() !=='false'  ? (item.value.toString() === 'true'?'√':item.value.toString()) : '' }}</text>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</om-sub>
					</view>
					<view v-else-if="showAll">
						<om-sub isCard :title="changeTitles[title]?changeTitles[title]:title">
							<text class="flex justify-center">无</text>
						</om-sub>
					</view>
				</view>
			</view>
			<!-- 表尾信息 -->
			<view v-if="showTailData.length">
				<om-divider :gap="[20, 10]" lineColor="#eee" :lineSize="6"></om-divider>
				<view v-for="(item, index) in showTailData" :key="index" style="display: block;">
					<view v-if="hasValue(item.value) || showAll">
						<view class="tui-flex">
							<view class="flex justify-end tui-col-4 show-label">
								<text class="om-font-size" v-if="changeTitles[item.name]">
									{{changeTitles[item.name]}}
								</text>
								<text class="om-font-size" v-else>{{ item.name }}</text>
							</view>
							<view class="flex justify-start  align-center tui-col-8">
								<button class="bg-blue" v-if="item.isfile" size="mini" @click="openFile(item)">查看</button>
								<text v-else>{{ hasValue(item.value) ? (item.value.toString() === 'true'?'√':item.value.toString()) : '' }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<om-divider :gap="[60, 40]"></om-divider>
			<!-- <view class="sub-title">流程</view> -->
			<view class="sub-title-des" style="font-size: 14px;" v-show="stepDesc">{{ stepDesc }}</view>
			<uni-steps :options="getFlows" direction="column" :active="active"></uni-steps>
		</view>
		<view v-if="buttons && buttons.length">
			<om-toolbar ref="omToolbar" :buttons="buttons" fontSize="medium"></om-toolbar>
		</view>
		<!-- <om-hover-button url="/pages/main/main/main" openType="switchTab" title="返回首页"></om-hover-button> -->
		<uni-fab horizontal="right" @trigger="trigger" direction="vertical" :content="fabButtons" :scrollTop="scrollTop" />
	</om-page>
</template>

<script>
	import {
		buttonShow
	} from '@/static/js/buttonShow.js';
	import {
		getCharLength
	} from '@/static/js/common.js';
	import {
		hasValue
	} from '@/static/js/formUtil.js';
	import {mapState, mapActions} from 'pinia';
	import { useLoginUserStore } from '@/stores/login-user.js';
	import uQRCode from '@/static/js/uqrcode.js'
	const app = getApp();
	export default {
		provide() {
			return {
				show: this
			};
		},
		data() {
			return {
				showAll:false,
				scrollTop: 0,
				fabButtons: [app.globalData.button.home],
				firstName: '',
				middleName: '',
				changeTitles: {},
				changeNames: {},
				buttons: [],
				steps: [],
				subTitles: [],
				stepDesc: '',
				showListMap: {},
				showData: [],
				showTailData: [],
				showDataMap: {},
				titleButtonMap: {},
				titleItemNum: {},
				logoColor: '',
				formId: 0, //表单ID
				busCode: '', //业务职能编码
				active: -1, //当前激活步骤
				pageTitle: '',
				tableData: {},
				tableColumns: {},
				showTable: {}, //子表是否显示表格
				stickSideTable: {},//是否固定列
				flowChangeApproveCache:"flow-change-approver-cache",//修改审批人
				flowChangeNodeCache:"flow-change-node-cache",//转办
				backFlowNodeCache:"back-flow-node-cache",//退回指定节点
				qrcodeShow: false,
				qrcodeTime: null,
				qrcodeText: '',
				qrcodeSize: uni.upx2px(400),
				timer: '',
				exist:['cateName','percentageScore','cateWeight','cateScore','singleSumScore'],
				existArr:[]
			};
		},
		computed: {
			getFlows() {
				let _that = this;
				let flows = [];
				this.steps.forEach(function(v, i) {
					let o = {
						title: v.userRole,
						descList: [ v.userName, v.roler || '', v.time+(v.allTime ? ' 用时'+v.allTime : '') || '', v.contents || '']
					};
					if (v.time) {
						_that.active = i;
					}
					flows.push(o);
				});
				return flows;
			},
			...mapState(useLoginUserStore, ['subTableShowType','userId', 'orgId'])
		},
		watch:{
			buttons(newValue, oldValue){
				if(oldValue.length != 0){
					uni.setStorage({
						key: this.serviceJs.storageKeies().flowChangeCache,
						data:true
					})
					this.setPending(true)
				}
			}
		},
		methods: {
			...mapMutations(useLoginUserStore, [
				'setUnread',
				'setPending'
			]),
			groupBy(array, f){
			  const groups = {}
			    array.forEach(function (o) {
			    const group = f(o)
			    groups[group] = groups[group] || []
			    groups[group].push(o)
			  })
			  return Object.keys(groups).map(function (group) {
			    return groups[group]
			  })
			},
			arrayGroupBy(list, groupId){
				let _that = this
			  const sorted = _that.groupBy(list, function (item) {
			    return [item[groupId]]
			  })
			  return sorted
			},
			showAllClick(){
				this.showAll = !this.showAll
			},
			hasValue(v){
				return hasValue(v, true)
			},
			openFile(item) {
				let _that = this
				if(item.fileUrl){
					uni.navigateTo({
						url: "/pages/public/filetable/filetable?fileUrl=" + encodeURIComponent(item.fileUrl)
					})
				} else {
					if(!item.multiFile && item.fileName && item.fileName.endsWith("pdf")){
						this.om.openPdf(item)
					}else{
						let subId = '',simpleClazzName='',fileId='',fieldId='';
						if (item.attr) {
							if(item.attr.subId)
								subId = item.attr.subId
							if(item.attr.simpleClazzName)
								simpleClazzName = item.attr.simpleClazzName
							if(item.attr.fileId)
								fileId = item.attr.fileId
							if(item.attr.fieldId)
								fieldId = item.attr.fieldId
						}
						uni.navigateTo({
							url: "/pages/public/filetable/filetable?busCode=" + _that.busCode + "&mainId=" + _that.formId + "&subId=" +
								subId + "&simpleClazzName="+simpleClazzName+"&fileId="+fileId+"&fieldId="+fieldId
						})
					}
				}
			},
			trigger(e) {
				if (e.item.text === '返回首页') {
					uni.switchTab({
						url: '/pages/main/main/main'
					});
				} else if (e.item.text === '返回顶部') {
					this.scrollTop = 0;
					uni.pageScrollTo({
						scrollTop: 0
					});
				}
			},
			analytics(title) {
				if (title) {
					this.showTable[title] = !this.showTable[title];
				}
			},
			loadFlow: function() {
				let _that = this;
				_that.om
					.request('wxCommon/getFlow', {
						formId: _that.formId,
						busCode: _that.busCode
					})
					.then(res => {
						_that.steps = res.value.stepList;
						_that.stepDesc = res.value.flowState
					});
			},
			saveHistory() {
				let _that = this;
				_that.om.request(
					'scanHistory/saveScanHistory', {
						fileId: _that.formId,
						'form.code': _that.busCode
					},
					'post'
				).then(res=>{
					if(res.succeed){
						if(res.value && res.value.notifyFlag){
							_that.setUnread(true)
						}
					}
				});
			},
			init() {
				let _that = this;
				if (_that.subTitles) {
					let objTable = {},objData = {},objColumns = {},objStickSideTable={};
					for (let i = 0; i < _that.subTitles.length; i++) {
						let title = _that.subTitles[i];
						let showlist = _that.showListMap[title];
						if (showlist && showlist.length) {
							objTable[title] = (this.subTableShowType == 0?false:true)  
							let data = []; //子表数据
							let column = []; //子表列标题
							let col = {} //
							for (let j = 0; j < showlist.length; j++) {
								let show = showlist[j];
								let o = {};
								if (show && show.length) {
									if (column.length == 0) {
										for (let k = 0; k < show.length; k++) {
											let item = show[k]
											_that.wrapCol(item, o)
											let c = {
												title: _that.getName(item),//_that.changeTitles[item.name] ? _that.changeTitles[item.name] : item.name,
												key: item.field,
												width: Math.max(getCharLength(_that.getName(item)), getCharLength(item.value ? item.value.toString() : "")) * 12 +
													30
											}
											if(item.isfile){
												if(!item.multiFile && (item.fileName && item.fileName.endsWith("pdf")) ){
													c.isLink = {
														url: "/pages/public/pdf-preview/pdf-preview",
														params: ['url','busCode','fileId']
													}
												}else{
													c.isLink = {
														url: "/pages/public/filetable/filetable",
														params: ['busCode','mainId','subId','simpleClazzName','url','fileId','fieldId']
													}
												}
											}
											if(!_that.exist.includes(c.key)){
												column.push(c)
												col[item.field] = c
											}else{
												_that.existArr.push(c)
											}
										}
									} else {
										for (let k = 0; k < show.length; k++) {
											let item = show[k]
											_that.wrapCol(item, o)
											let width = getCharLength(item.value ? item.value.toString() : "") * 12 + 30
											if (!col[item.field] || !col[item.field].width) {} else {
												col[item.field].width = Math.max(col[item.field].width, width)
											}
										}
									}
								}
								data.push(o)
							}
							objData = data;
							objColumns[title] = column;
							if(column[0].width > 300){
								objStickSideTable[title]=false
							}else{
								objStickSideTable[title]=true
							}
						}
					}
					_that.showTable = objTable;
					_that.tableData = _that.arrayGroupBy(objData,_that.exist[0])
					_that.tableColumns = objColumns;
					_that.stickSideTable = objStickSideTable
					_that.$nextTick(function(){
						_that.$forceUpdate()
					})
				}
			},
			getName(wxColumn){
				if(wxColumn.nameChange){
					let newName = this.changeNames[wxColumn.name]
					if(newName){
						return newName;
					}else{
						return wxColumn.name;
					}
				}else{
					return wxColumn.name;
				}
			},
			wrapCol(item, o){
				let _that = this
				if(item.value.toString()){
					if(item.value.toString() === 'true'){
						o[item.field] = '√'
					}else if(item.value.toString() === 'false'){
						o[item.field] = ''
					}else{
						o[item.field] = item.value.toString()
					}
				}
				if(item.isfile){
					let subId = '',simpleClazzName='',fileId='',fieldId='';
					if (item.attr) {
						if(item.attr.subId)
							subId = item.attr.subId
						if(item.attr.simpleClazzName)
							simpleClazzName = item.attr.simpleClazzName
						if(item.attr.fileId)
							fileId = item.attr.fileId
						if(item.attr.fieldId)
							fieldId = item.attr.fieldId
					}
					o['busCode'] = _that.busCode
					o['mainId'] = _that.formId
					o['subId'] = subId
					o['simpleClazzName'] = simpleClazzName
					o['fileId'] = fileId
					o['fieldId'] = fieldId
				}
			},
			useHandle(handle){
				let handleStr = 'this.' + handle + '()'
				eval(handleStr)
			},
			qrCodeBtnClick(){
				let _that = this;
				_that.canGetSignInData()
			},
			closeCodeModle(){
				this.qrcodeShow = false
				clearInterval(this.timer)  
			},
			canGetSignInData(){
				let _that = this
				_that.om.request('trainSign/canGetSignInData',{
					formId: _that.formId
				}).then(res => {
					if(res.succeed == true){
						_that.om.request('commonForm/getSignInData',{
							formId: _that.formId,
							businessFormCode: _that.busCode,
							loopFlag: true
						}).then(res => {
							if(res.succeed == true){
								clearInterval(_that.timer) 
								_that.qrcodeShow = true
								_that.qrcodeTime = res.value.intervalTime
								res.value.businessFormCode = _that.busCode
								_that.qrcodeText = JSON.stringify(res.value)
								_that.makeCode()
								_that.timer = setInterval(_that.getSignInData, _that.qrcodeTime);
							}else{
								clearInterval(_that.timer) 
								_that.om.toast(res.msg)
							}
						})
					}else{
						_that.om.toast(res.msg)
					}
				})
			},
			getSignInData(){
				let _that = this
				_that.om.request('commonForm/getSignInData', {
					formId:_that.formId,
					businessFormCode: _that.busCode,
					loopFlag: true
				}).then(res => {
					if(res.succeed == true){
						res.value.businessFormCode = _that.busCode
						_that.qrcodeText = JSON.stringify(res.value)
						_that.makeCode()
					}else{
						_that.qrcodeShow = false
						clearInterval(_that.timer) 
						_that.om.toast(res.msg)
					}
				})
			},
			makeCode(){
				uQRCode.make({
					canvasId: 'qrcode',
					text: this.qrcodeText,
					size: this.qrcodeSize,
					margin: 10
				}).then(res => {
					// console.log(res)
					// this.qrcodeSrc = res
				}).finally(() => {
					
				})
			}
		},
		onLoad() {
			let _that = this;
			let forminfo = uni.getStorageSync('forminfo');
			if(forminfo){
				_that.subTitles = forminfo.subTitles;
				_that.showListMap = forminfo.showListMap
				_that.showData = forminfo.showData;
				_that.showTailData = forminfo.showTailData;
				_that.showDataMap = forminfo.showDataMap;
				_that.titleButtonMap = forminfo.titleButtonMap;
				_that.titleItemNum = forminfo.titleItemNum;
				_that.changeTitles = forminfo.changeTitles || {};
				_that.changeNames = forminfo.changeNames || {};
				_that.title = forminfo.title;
				_that.formId = forminfo.formId;
				_that.busCode = forminfo.busCode;
				_that.logoColor = _that.ColorList[forminfo.formId % _that.ColorList.length].name;
				let firstName = ''
				if (forminfo.zuserId === _that.userId) {
					firstName = '我';
					_that.middleName = '';
				} else {
					firstName = forminfo.zuserName ? forminfo.zuserName.substr(0, 1) : '';
					_that.middleName = forminfo.zuserName ? forminfo.zuserName.substr(1, forminfo.zuserName.length) : '';
				}
				if (forminfo.title) {
					_that.pageTitle = forminfo.title;
					uni.setNavigationBarTitle({
						title: _that.pageTitle
					});
				}
				if (firstName) {
					_that.firstName = firstName;
				} else if (_that.pageTitle) {
					_that.firstName = _that.pageTitle.substr(0, 1)
				} else {
					_that.firstName = '表单'
				}
				_that.init();
				_that.loadFlow();
				_that.saveHistory();
				
				//#ifdef APP-PLUS
				//按钮权限判断
				buttonShow(_that, _that.busCode, _that.formId).then(res => {
						if (res) {
							_that.buttons = res;
						}
					})
					.catch(e => console.log(e));
				//#endif
			}
		},
		onShow() {
			let _that = this;
			//按钮权限判断
			buttonShow(_that, _that.busCode, _that.formId)
				.then(res => {
					if (res) {
						_that.buttons = res;
					}
				})
				.catch(e => console.log(e));
			uni.getStorage({
				key:this.flowChangeApproveCache,
				success: function(res) {
					if (res.data) {
						if(_that.$refs.omToolbar){
							_that.$refs.omToolbar.approveUserId = res.data.id
							_that.$refs.omToolbar.approveUserName = res.data.userSalaryPosInstName
						}
					}
					uni.removeStorage({
						key:_that.flowChangeApproveCache
					})
				}
			})
			uni.getStorage({
				key:this.flowChangeNodeCache,
				success: function(res) {
					if (res.data) {
						if(_that.$refs.omToolbar){
							let d = res.data;
							_that.$refs.omToolbar.changeNodeUserIds = d.map(e => e.id).join(",");
							_that.$refs.omToolbar.changeNodeUserNames = d.map(e => e.username).join(",");
							_that.$refs.omToolbar.changeNodeInitData = d;
						}
					}
					uni.removeStorage({
						key:_that.flowChangeNodeCache
					})
				}
			})
			uni.getStorage({
				key:this.backFlowNodeCache,
				success: function(res) {
					if (res.data) {
						if(_that.$refs.omToolbar){
							_that.$refs.omToolbar.backNodeId = res.data.nodeId
							_that.$refs.omToolbar.backFlowNodeName = res.data.role + "["+res.data.sort+"]"
						}
					}
					uni.removeStorage({
						key:_that.backFlowNodeCache
					})
				}
			})
		},
		onPageScroll(e) {
			let _that = this;
			_that.scrollTop = e.scrollTop;
			let fabButtons = _that.fabButtons;
			if (e.scrollTop > 5) {
				if (_that.fabButtons.length === 1) {
					fabButtons.unshift(app.globalData.button.top);
					_that.fabButtons = fabButtons;
				}
			} else {
				if (_that.fabButtons.length === 2) {
					fabButtons.shift();
					_that.fabButtons = fabButtons;
				}
			}
		},
		beforeDestroy() {
			clearInterval(this.timer)  
		},
		onUnload() {
			uni.removeStorage({
				key: 'forminfo'
			});
		}
	};
</script>

<style>
	.show-title {
		font-size: 28rpx;
	}

	.om-show-hd {
		display: flex;
		justify-content: center;
		padding: 30rpx 0 20rpx 0;
	}

	.sub-title {
		margin: 20rpx;
		font-size: 28rpx;
		font-weight: 700;
		color: rgb(87, 85, 85);
	}
	.sub-title-des {
		margin: 20rpx;
		font-size: 24rpx;
		color: rgb(87, 85, 85);
	}
	.show-font-size{
		font-size:16px
	}
	.create-qrcode{
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		z-index: 99999;
	}
	.create-qrcode .bg{
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
	}
	.canvascode{
		text-align: center;
		margin-top: 50%;
	}
	.canvascode canvas{
		margin: 0 auto;
	}
	.subbtn{
		line-height:30px; 
		width:80px; 
		height:30px;
		margin-right: 15px;
		color: #FFFFFF; 
		padding: 0;
	}
</style>
